<script lang="ts" setup>
// 导入 Vue 相关的函数和组件
import { onMounted, ref, reactive, watch } from 'vue';
// 导入 Element Plus 的图标组件
import { Search, Refresh, Check, Plus, Ticket, Tickets } from '@element-plus/icons-vue';
// 导入 Element Plus 的消息组件和表单实例、表格列上下文
import { ElMessage, FormInstance, TableColumnCtx } from 'element-plus';
// 导入自定义的 http 模块
import http from '@/http';
// 导入 dayjs 库用于日期处理
import dayjs from 'dayjs';
// 导入 dayjs 的中文语言包
import 'dayjs/locale/zh-cn';


// 设置 dayjs 的语言为中文
dayjs.locale('zh-cn');

// 所属科室的选择值，使用 ref 函数创建响应式引用
const deptId = ref('');
// 医生名称的选择值，使用 ref 函数创建响应式引用
const userName = ref('');

// 开始日期，使用 ref 函数创建响应式引用
const startDate = ref('');
// 结束日期，使用 ref 函数创建响应式引用
const endDate = ref('');

// 格式化后的日期范围，使用 ref 函数创建响应式引用
const formattedDateRange = ref('');

// 表格数据，使用 ref 函数创建响应式引用
const tableData = ref([]);

// 日期列数据，使用 ref 函数创建响应式引用
const dateColumns = ref([]);


// 在组件挂载后执行
onMounted(() => {
  // 获取当前日期
  const today = dayjs();
  // 获取当前周的开始日期并格式化为 YYYY-MM-DD 格式
  const startOfWeek = today.startOf('week').format('YYYY-MM-DD');
  // 获取当前周的结束日期并格式化为 YYYY-MM-DD 格式
  const endOfWeek = today.endOf('week').format('YYYY-MM-DD');
  // 将开始日期设置为当前周的开始日期
  startDate.value = startOfWeek;
  // 将结束日期设置为当前周的结束日期
  endDate.value = endOfWeek;

  // 初始化日期列
  updateDateColumns();
});

// 监听 startDate 和 endDate 的变化
watch([startDate, endDate], () => {
  // 当 startDate 或 endDate 发生变化时，更新日期列
  updateDateColumns();
});

// 更新日期列的函数
function updateDateColumns() {
  const columns = [];
  // 获取开始日期对应的星期几
  const startDay = dayjs(startDate.value).day();
  // 获取结束日期对应的星期几
  const endDay = dayjs(endDate.value).day();
  // 生成包含开始日期和对应中文星期几的字符串
  const startDateStr = `${startDate.value}(${getWeekday(startDay)})`;
  // 生成包含结束日期和对应中文星期几的字符串
  const endDateStr = `${endDate.value}(${getWeekday(endDay)})`;
  // 格式化日期范围
  formattedDateRange.value = `${startDateStr}-${endDateStr}`;

  for (let i = 0; i < 7; i++) {
    // 生成每个日期并添加对应的中文星期几
    const date = dayjs(startDate.value).add(i, 'day').format('YYYY-MM-DD') + `(${getWeekday(dayjs(startDate.value).add(i, 'day').day())})`;
    // 将生成的日期对象添加到 columns 数组中
    columns.push({
      date,
      label: date,
      prop: date,
    });
  }
  // 将生成的日期列数据赋值给 dateColumns 响应式引用
  dateColumns.value = columns;
}


// 根据数字获取对应的中文星期几的函数
function getWeekday(day) {
  const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
  // 返回对应的中文星期几
  return weekdays[day];
}

// 搜索功能函数
function searchFor() {
  // 检查 deptId 和 userName 是否为空
  if (!deptId.value || !userName.value) {
    // 若为空，显示错误消息
    ElMessage.error('请选择所属科室和医生名称');
    return;
  }
  // 这里可以添加具体的搜索逻辑，例如根据选择的科室和医生以及日期范围发送请求获取数据等
  // 显示搜索成功消息
  ElMessage.success('执行搜索操作');
}

// 重置功能函数
function reset() {
  // 清空 deptId 的值
  deptId.value = '';
  // 清空 userName 的值
  userName.value = '';
  // 可以根据实际情况重置其他相关状态或数据
  // 显示重置成功消息
  ElMessage.success('已重置');
}

// 上一周功能函数
function prevWeek() {
  // 获取当前的开始日期
  const currentStart = dayjs(startDate.value);
  // 获取当前的结束日期
  const currentEnd = dayjs(endDate.value);
  // 计算上一周的开始日期
  const prevStart = currentStart.subtract(7, 'day');
  // 计算上一周的结束日期
  const prevEnd = currentEnd.subtract(7, 'day');
  // 更新开始日期为上一周的开始日期
  startDate.value = prevStart.format('YYYY-MM-DD');
  // 更新结束日期为上一周的结束日期
  endDate.value = prevEnd.format('YYYY-MM-DD');
}

// 获取当前周功能函数
function getDay() {
  // 获取当前日期
  const today = dayjs();
  // 获取当前周的开始日期
  const startOfWeek = today.startOf('week').format('YYYY-MM-DD');
  // 获取当前周的结束日期
  const endOfWeek = today.endOf('week').format('YYYY-MM-DD');
  // 更新开始日期为当前周的开始日期
  startDate.value = startOfWeek;
  // 更新结束日期为当前周的结束日期
  endDate.value = endOfWeek;
}

// 下一周功能函数
function nextWeek() {
  // 获取当前的开始日期
  const currentStart = dayjs(startDate.value);
  // 获取当前的结束日期
  const currentEnd = dayjs(endDate.value);
  // 计算下一周的开始日期
  const nextStart = currentStart.add(7, 'day');
  // 计算下一周的结束日期
  const nextEnd = currentEnd.add(7, 'day');
  // 更新开始日期为下一周的开始日期
  startDate.value = nextStart.format('YYYY-MM-DD');
  // 更新结束日期为下一周的结束日期
  endDate.value = nextEnd.format('YYYY-MM-DD');
}

// 时间/日期子部分的 ref 响应式引用
const sw = ref('上午');
const xw = ref('下午');
const ws = ref('晚上');


function getDepartmentsAndDoctors() {
  // 发送请求获取部门和医生数据
  http.get('/user/getDepartmentsAndDoctors')
    .then((res) => {
      // 存储请求返回的数据
      let tempData = res;
      // 假设扁鹊的索引为 0，华佗的索引为 3，可根据实际情况修改
      const indexOfBianQue = 0;
      const indexOfHuaTuo = 3;
      // 生成空数据的函数
      const generateEmptyDataForEachItem = (item) => {
        return [
          { userName: '', deptName: '', time: '上午,下午,晚上' },
          { userName: '', deptName: '', time: '上午,下午,晚上' }
        ];
      };
      // 为每个医生数据添加两条空数据
      tempData = tempData.map(item => {
        return [item, ...generateEmptyDataForEachItem(item)];
      }).flat();
      // 将数据赋值给 tableData 响应式引用，并添加 sw, xw, ws 信息
      tableData.value = tempData.map(item => ({
        ...item,
        sw: sw.value,
        xw: xw.value,
        ws: ws.value
      }));
    });
}


// 生成指定数量的空数据
function generateEmptyData(count: number): any[] {
  const emptyData = [];
  for (let i = 0; i < count; i++) {
    // 生成包含空值的对象，根据实际表格数据结构添加其他属性
    emptyData.push({
      userName: '',
      deptName: '',
    });
  }
  return emptyData;
}


onMounted(() => {
  // 在组件挂载后调用获取部门和医生的函数
  getDepartmentsAndDoctors();
});


//跨列
const objectSpanMethod = ({
  rowIndex,
  columnIndex,
}) => {
  if (columnIndex === 0) {
    if (rowIndex % 3 === 0) {
      // 对于第一列，每三行合并为一行
      return {
        rowspan: 3,
        colspan: 1,
      }
    } else {
      // 不显示
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }
  if (columnIndex === 1) {
    if (rowIndex % 3 === 0) {
      // 对于第二列，每三行合并为一行
      return {
        rowspan: 3,
        colspan: 1,
      }
    } else {
      // 不显示
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }
  if (columnIndex === 10) {
    if (rowIndex % 3 === 0) {
      // 对于第二列，每三行合并为一行
      return {
        rowspan: 3,
        colspan: 1,
      }
    } else {
      // 不显示
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }
}

const name = ref('')
//排班业务
const scheduling = (index: number, row) => {
    console.log(row);
    addedLayoutInformation.value.userId = row.userId;
    if (row.deptName == '内科') {
        addedLayoutInformation.value.deptId = '101';
    } else if (row.deptName == '外科') {
        addedLayoutInformation.value.deptId = '102';
    } else if (row.deptName == '儿科') {
        addedLayoutInformation.value.deptId = '103';
    } else if (row.deptName == '妇科') {
        addedLayoutInformation.value.deptId = '104';
    }

    name.value = row.userName;
    schedulingDialog.value = true;
    // 记录当前点击的行索引和列索引
    selectedRowIndex.value = index;
    selectedColumnIndex.value = Object.keys(row).indexOf('2025-01-06(周一)');
};

//排班的模态框开关
const schedulingDialog = ref(false);

//你要添加的排班信息
const addedLayoutInformation = ref({
  userId: '',
  deptId: '',
  subsectionType: '',
  schedulingType: '',
  schedulingDay: '',
})

const selectedRowIndex = ref(-1);
const selectedColumnIndex = ref(-1);
function confirm() {
  let result = addedLayoutInformation.value.schedulingDay.substring(0, addedLayoutInformation.value.schedulingDay.indexOf('('));
  addedLayoutInformation.value.schedulingDay = result;
  console.log(addedLayoutInformation.value);
  http.post('/hisScheduling/addHisScheduling', addedLayoutInformation.value)
    .then((res) => {
      if (res == 1) {
        ElMessage({
          message: '成功',
          type: 'success',
        });
        http.get('/hisScheduling/getAll')
          .then((res) => {
            if (res != "") {
              // 根据选中的行索引和列索引更新表格数据
              if (selectedRowIndex.value >= 0 && selectedColumnIndex.value >= 0) {
                tableData.value[selectedRowIndex.value][Object.keys(tableData.value[0])[selectedColumnIndex.value]] = '门诊';
                console.log(selectedRowIndex.value)
              }
            }
          });
          schedulingDialog.value = false;
      }
    });
}


</script>
<template>
  <el-row>
    <el-col :span="4">
      <el-form-item label="所属科室">
        <!-- 输入框绑定 deptId 属性，类型为文本，自动补全关闭 -->
        <el-select v-model="deptId" placeholder="请选择所属科室" clearable style="width: 200px;">
          <el-option label="内科" value="101" />
          <el-option label="外科" value="102" />
          <el-option label="儿科" value="103" />
          <el-option label="妇科" value="104" />
          <el-option label="眼科" value="105" />
          <el-option label="耳鼻喉科" value="106" />
          <el-option label="口腔科" value="107" />
          <el-option label="皮肤科" value="108" />
          <el-option label="其他" value="109" />
        </el-select>
      </el-form-item>
    </el-col>
    &nbsp;
    <el-col :span="4">
      <el-form-item label="医生名称">
        <!-- 输入框绑定 userName 属性，类型为文本，自动补全关闭 -->
        <el-select v-model="userName" placeholder="请选择医生" clearable style="width: 200px;">
          <el-option label="扁鹊" value="2" />
          <el-option label="李时珍" value="3" />
          <el-option label="孙思邈" value="4" />
          <el-option label="华佗" value="5" />
          <el-option label="皇甫谧" value="6" />
          <el-option label="林道飞" value="7" />
          <el-option label="熊宗立" value="8" />
          <el-option label="肖药饵" value="9" />
        </el-select>
      </el-form-item>
    </el-col>
    &nbsp;
    <el-col :span="9">
      <el-button type="primary" :icon="Search" @click="searchFor">搜索</el-button>
      <el-button type="primary" :icon="Refresh" @click="reset">重置</el-button>
    </el-col>
    <el-col :span="6">
      <el-button type="primary" :icon="Plus" @click="prevWeek">上一周</el-button>
      <el-button type="primary" :icon="Tickets" @click="getDay">当前周</el-button>
      <el-button type="primary" :icon="Check" @click="nextWeek">下一周</el-button>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24">
      <div style="margin: auto; width: 450px; margin-top: 5px;">{{ formattedDateRange }}</div>
    </el-col>
  </el-row>
  <br>
  <el-row>
    <el-col :span="24">
      <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
        <el-table-column property="userName" label="医生" align="center">
        </el-table-column>
        <el-table-column property="deptName" label="科室" align="center">
        </el-table-column>
        <el-table-column label="时间/日期" align="center">
          <template #default="scope">
            <div v-if="scope.$index === 0">{{ sw }}</div>
            <div v-else-if="scope.$index === 1">{{ xw }}</div>
            <div v-else-if="scope.$index === 2">{{ ws }}</div>
            <div v-if="scope.$index === 3">{{ sw }}</div>
            <div v-else-if="scope.$index === 4">{{ xw }}</div>
            <div v-else-if="scope.$index === 5">{{ ws }}</div>
            <div v-if="scope.$index === 6">{{ sw }}</div>
            <div v-else-if="scope.$index === 7">{{ xw }}</div>
            <div v-else-if="scope.$index === 8">{{ ws }}</div>
            <div v-if="scope.$index === 9">{{ sw }}</div>
            <div v-else-if="scope.$index === 10">{{ xw }}</div>
            <div v-else-if="scope.$index === 11">{{ ws }}</div>
          </template>
        </el-table-column>
        <el-table-column v-for="(item, index) in dateColumns" :key="index" :prop="item.date" :label="item.date"
          property="schedulingType" align="center">
          <template #default="scope">
            <span v-if="scope.row.schedulingType == 1">门诊</span>
            <span v-else-if="scope.row.schedulingType == 2">急诊</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button type="text" size="small" @click="scheduling(scope.$index, scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>

  <!-- 排班对话框 -->
  <el-dialog v-model="schedulingDialog" :title="`修改【${name}】的排班信息`" width="500" center>
    <el-row>
      <el-col :span="24">
        <el-form-item label="排班时间段">
          <el-select v-model="addedLayoutInformation.subsectionType" placeholder="请选择排班时间段" clearable>
            <el-option label="上午" value="1" />
            <el-option label="下午" value="2" />
            <el-option label="晚上" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="排班类型">
          <el-select v-model="addedLayoutInformation.schedulingType" placeholder="请选择排班类型" clearable>
            <el-option label="门诊" value="1" />
            <el-option label="急诊" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="具体排班时间">
          <el-select v-model="addedLayoutInformation.schedulingDay" placeholder="请选择具体排班时间" clearable>
            <el-option v-for="(item, index) in dateColumns" :key="index" :label="item.date" :value="item.date" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="confirm">
          确定
        </el-button>
        <el-button @click="schedulingDialog = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>


<style scoped></style>
